import { CloseCircleOutlined } from '@ant-design/icons';
import { Button, Result, Typography } from 'antd';

import type { FC } from 'react';
import type { FallbackProps } from 'react-error-boundary';

export type PageErrorByBoundaryProps = FallbackProps;

const PageErrorByBoundary: FC<PageErrorByBoundaryProps> = (props) => {
  const { error, resetErrorBoundary } = props;

  return (
    <Result
      status="403"
      title="非常抱歉，似乎出现了不可预料的错误"
      subTitle="您可以点击重试按钮，返回之前的页面"
      extra={[
        <Button key={Math.random()} type="primary" onClick={resetErrorBoundary}>
          重试
        </Button>,
      ]}
    >
      <Typography.Paragraph>
        <Typography.Text
          strong
          style={{
            fontSize: 16,
          }}
        >
          您可以将下面的错误信息提交给我司，后面会持续跟进，感谢您的理解:
        </Typography.Text>
      </Typography.Paragraph>
      <Typography.Paragraph>
        <CloseCircleOutlined /> {error.message}
      </Typography.Paragraph>
    </Result>
  );
};

export default PageErrorByBoundary;
